<template>
  <div class="margin-top-sm">
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="ID" width="95">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="标题" align="center">
        <template slot-scope="scope">
          <span class="color-link">{{ scope.row.article_title }}</span>
        </template>
      </el-table-column>
      <el-table-column label="图片" align="center">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 66px"
            :src="scope.row.article_pic"
            :preview-src-list="scope.row.article_pic.split(',')"
          >
          </el-image>
        </template>
      </el-table-column>
      <el-table-column label="作者" width="110" align="center">
        <template>
          <span>Rinvay</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="添加时间" width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.add_time | dateTimeFilter }}</span>
        </template>
      </el-table-column>
      <el-table-column label="发表" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_publish"
            @change="handleChange(scope.row, 'publish')"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="置顶" align="center" width="100">
        <template slot-scope="scope">
          <el-switch
            v-model="scope.row.is_top"
            @change="handleChange(scope.row, 'top')"
          >
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="200" align="center">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="warning"
            @click="handleEdit(scope.row.id)"
            >编辑</el-button
          >
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="margin-top">
      <el-pagination
        @current-change="handlePageChange"
        background
        layout="prev, pager, next"
        :total="count"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  articleList,
  articleTopChange,
  articlePublishChange,
  articleDelete,
} from "@/api/article";

export default {
  data() {
    return {
      list: [],
      formParams: {
        page: 1,
        limit: 10,
      },
      count: 0,
      listLoading: true,
    };
  },
  created() {
    this.handleLoadData();
  },
  methods: {
    // 处理发表
    handleChange(row, ot) {
      this.$showFullScreenLoading();
      let id = row.id,
        is_top = row.is_top ? 1 : 0,
        is_publish = row.is_publish ? 1 : 0;
      console.log(row, ot);
      if (ot === "publish") {
        articlePublishChange({ id, is_publish })
          .then((res) => {
            this.$closeFullScreenLoading();
            this.$message.success(res.msg);
          })
          .catch((err) => {
            this.$closeFullScreenLoading();
            this.$message.error(err.msg);
          });
      } else {
        articleTopChange({ id, is_top })
          .then((res) => {
            this.$closeFullScreenLoading();
            this.$message.success(res.msg);
          })
          .catch((err) => {
            this.$closeFullScreenLoading();
            this.$message.error(err.msg);
          });
      }
    },
    // 处理编辑
    handleEdit(id) {
      // console.log(id, "ID");
      this.$emit("handleGoEdit", id);
    },
    // 处理删除
    handleDelete(id) {
      console.log(id, "ID");
      this.$confirm("此操作将永久删除该文章, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          articleDelete(id)
            .then((res) => {
              this.$message.success(res.msg);
              this.handleLoadData();
            })
            .catch((err) => {
              this.$message.error(err.msg);
            });
        })
        .catch(() => {});
    },
    // 加载数据
    handleLoadData() {
      this.listLoading = false;
      articleList(this.formParams).then((res) => {
        this.count = res.data.count;
        this.list = res.data.data;
      });
    },
    //页数改变
    handlePageChange(index) {
      this.formParams.page = index;
      this.handleLoadData();
    },
  },
};
</script>
